<template>
	<view class="kuaisuzixun">
		<headertop title="快速咨询" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<image :src="_static('/images/Rectangle 2@2x(1).png')" mode="" class="kuaisuzixunback"></image>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="fenlei">
			<view :class="formData.user_read_status=='all'?'itemfenleitext':'itemfenleitext1'" @click="qiehuan('all')">
				<image v-if="formData.user_read_status=='all'" :src="_static('/images/微信图片_20250709171344.png')"
					class="itemfenleitextback" mode="widthFix">
				</image>
				<span>全部</span>
			</view>
			<view :class="formData.user_read_status==0?'itemfenleitext':'itemfenleitext1'" @click="qiehuan(0)">
				<image v-if="formData.user_read_status==0" :src="_static('/images/微信图片_20250709171344.png')"
					class="itemfenleitextback" mode="widthFix">
				</image>
				未读
			</view>
			<view :class="formData.user_read_status==1?'itemfenleitext':'itemfenleitext1'" @click="qiehuan(1)">
				<image v-if="formData.user_read_status==1" :src="_static('/images/微信图片_20250709171344.png')"
					class="itemfenleitextback" mode="widthFix">
				</image>
				已读
			</view>
		</view>
		<view class="contentList">
			<view class="msgicon" v-if="!list.length">
				<image :src="_static('/images/wxnone.png')" mode="widthFix">
				</image>
				<view class="msgtext">
					暂无咨询
				</view>
			</view>
			<view class="itemline" v-for="(item,index) in list" :key="item.id" @click="gopage(item)">
				<view class="biaoji" v-if="item.user_read_status==0">
					<view class="redbd">

					</view>
					<span>未读</span>
				</view>
				<view class="centernr">
					<view class="usertext">
						<image :src="item.avatar" class="avtar" mode=""></image>
						<view class="texts">
							<view class="t1">
								{{item['nickname']}}
							</view>
							<view class="datetext">
								{{formattedDate(item['newtime']*1000)}}
							</view>
						</view>
					</view>
					<view class="textms">
						{{item['new_content']}}
					</view>
				</view>
			</view>
		</view>
		<up-popup :show="show" mode="center">
			<view class="centerbox">
				<!-- <image :src="_static('/images/Rectangle 24515@2x.png')" class="centerboxback" mode="">
				</image> -->
				<view class="wtext">
					我要留言
				</view>
				<view class="textbox1">
					<textarea name="" placeholder="请输入内容" v-model="text" id="" cols="30" rows="10"></textarea>

					<view class="images">
						<view class="image" @click.stop="previewImage(index,images)" v-for="(item,index) in images"
							:key="index">
							<image :src="item" mode=""></image>
							<image :src="_static('/images/删除.png')" @click.stop="shanchu(images,index)" class="remivon"
								mode=""></image>
						</view>
						<view class="uploadimg" v-if="images.length!=6" @click="uploadImage()">
							<image :src="_static('/images/Group 10221@2x.png')" class="jiahaoicon" mode=""></image>
							<view class="sctext">
								上传图片
							</view>
						</view>

					</view>
				</view>

				<view class="btnss">
					<view class="btn1" @click="show=false">
						取消
					</view>
					<view class="btn2" @click="tj">
						提交
					</view>
				</view>
			</view>
		</up-popup>
		<view class="" style="height: 186rpx;">

		</view>
		<view class="fixed">
			<view class="btn" @click="liutyan">
				留言
			</view>
		</view>
		<userlogin @updata="init" ref="denglu"></userlogin>
	</view>
</template>

<script setup>
	import userlogin from '@/components/getuser/getuser.vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import {
		setToken,
		getToken,
	} from '@/ulm/utils/auth';
	import {
		baseUrl
	} from '@/ulm/config';
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import ulm, {
		$api
	} from '@/ulm';
	const total = ref(0)
	const text = ref('')
	const denglu = ref(null)
	const show = ref(false)
	const val = ref('')
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const list = ref([])
	const back1 = ref('')
	const userobj = ref({})
	const images = ref([])
	const info = ref({})
	const formData = reactive({
		page: 1,
		list_rows: 10,
		user_read_status: 'all',
	})

	onShow(() => {
		formData['page'] = 1
		list.value = []
		init()
		init1()
	})
	async function init1() {
		const res = await $api.doctorInfo()
		if (res.code == 1) {
			info.value = res.data
			console.log(info.value, 'infoinfoinfoinfo');
		}
	}

	function previewImage(index, arr) {
		wx.previewImage({
			current: arr[index], // 当前显示图片的http链接
			urls: arr // 需要预览的图片http链接列表
		});
	}

	function shanchu(arr, i) {
		arr.splice(i, 1)
	}

	function uploadImage(str) {
		uni.chooseImage({
			count: 6 - images.value.length, // 最多可选择图片数量
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
			success: (res) => {
				const validImages = res.tempFiles.filter(file => {
					return file.size <= 2 * 1024 * 1024; // 2MB = 2 * 1024 * 1024 Bytes
				});
				if (validImages.length === 0) {
					uni.showToast({
						title: `${res.tempFiles.length - validImages.length}张图片超过2MB`,
						icon: 'none'
					});
					return;
				}
				console.log(res, 'res-------');
				// tempFilePath 可以作为 img 标签的 src 属性显示图片
				const tempFilePaths = res.tempFilePaths
				uploadImages(tempFilePaths)
			},
			fail: (err) => {
				console.log('选择图片失败', err)
			}
		})
	}

	function uploadImages(filePaths) {
		const uploadTasks = filePaths.map((filePath, index) => {
			console.log(filePath, 'filePath===========');
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: `${baseUrl}/api/common/upload`,
					filePath: filePath,
					name: 'file',
					formData: {
						index: index // 可以添加序号标识
					},
					header: {
						token: getToken()
					},
					success: (uploadRes) => {
						resolve(JSON.parse(uploadRes.data))
					},
					fail: (err) => {
						reject(err)
					}
				})
			})
		})

		uni.showLoading({
			title: '上传中...'
		})

		Promise.all(uploadTasks)
			.then(results => {
				console.log(results[0], 'results[0]results[0]results[0]');
				for (var i in results) {
					images.value.push(results[i]['data']['fullurl'])
				}
				uni.hideLoading()

				uni.showToast({
					title: `成功上传${results.length}张图片`,
					icon: 'success'
				})
			})
			.catch(err => {
				console.log('部分图片上传失败', err)
				uni.hideLoading()
			})
	}

	function gopage(item) {
		uni.navigateTo({
			url: '/sub_index/index/kuaisuzixun1?id=' + item.id
		})
	}

	function liutyan() {
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		if (!info.value['doctor_name']) {
			uni.showToast({
				title: '请绑定医生后再留言',
				icon: 'none'
			})
			return
		}
		if (!userobj.value) {
			uni.showModal({
				title: '提示', // 标题（可选）
				content: '请先补全用户资料', // 内容（可选）
				confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
				success: (res) => {
					if (res.confirm) {
						// 执行确定后的逻辑
						uni.navigateTo({
							url: '/sub_index/index/bianjigerenziliao'
						})
					}
				},
				fail: (err) => {
					console.error('弹窗调用失败', err);
				}
			});

			return
		}
		images.value = []
		text.value = ''
		show.value = true
	}
	async function init() {
		const res = await $api.user_messagelist(formData)
		if (res.code == 1) {
			list.value.push(...res.data.data)
			console.log(list.value, 'list.valuelist.valuelist.value');
			total.value = res.data.total
			userinfoinit()
		}

	}
	async function userinfoinit() {
		const res = await $api.userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}
	async function tj() {
		if (!text.value && !images.value.length) {
			uni.showToast({
				title: '留言内容不能为空',
				icon: 'none'
			})
			return

		}
		const res = await $api.adduser_message({
			text: text.value,
			image: images.value.join()
		})
		if (res.code == 1) {
			list.value = []
			formData.page = 1
			setTimeout(() => {
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				})
			}, 500)
			show.value = false

			init()
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function qiehuan(user_read_status) {
		formData.user_read_status = user_read_status
		formData.page = 1
		list.value = []
		init()
	}
	onReachBottom(() => {
		if (total.value > list.value.length) {
			formData.page++
			init()

		}
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})

	function padStart(n) {
		return n.toString().padStart(2, 0)
	}
	// 类型列表
	const formattedDate = (timestamp) => {
		const date = new Date(timestamp);
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const day = date.getDate().toString().padStart(2, '0');
		const hours = date.getHours().toString().padStart(2, '0');
		const minutes = date.getMinutes().toString().padStart(2, '0');
		const seconds = date.getSeconds().toString().padStart(2, '0');
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})
</script>

<style lang="scss">
	.fixed {
		width: 100%;
		position: fixed;
		bottom: 0%;
		height: 186rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: center;

		.btn {
			width: 686rpx;
			height: 82rpx;
			background: #2AB4F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 24rpx;
		}
	}

	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.centerbox {
		width: 606rpx;
		overflow: hidden;
		position: relative;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		background: url('https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/Rectangle 24515@2x.png');
		background-size: 100% 100%;

		.centerboxback {
			width: 100%;
			height: 628rpx;
			overflow: hidden;
			position: absolute;
			z-index: -1;
		}

		.wtext {
			width: 100%;
			text-align: center;
			margin-top: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
		}

		.btnss {
			width: 526rpx;
			margin: auto;
			margin-top: 30rpx;
			margin-bottom: 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn2 {
				width: 246rpx;
				height: 64rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
			}

			.btn1 {
				width: 248rpx;
				height: 64rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #86909C;
				text-align: center;
				line-height: 64rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #86909C;
			}
		}

		.textbox1 {
			width: 526rpx;
			background: #F7F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: auto;
			margin-top: 32rpx;
			overflow: hidden;

			.images .image:nth-child(3n) {
				margin-right: 0rpx;
			}

			.images {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				width: 470rpx;
				margin: auto;
				margin-bottom: 28rpx;

				.image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					position: relative;
					margin-right: 25rpx;
					margin-bottom: 20rpx;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						overflow: hidden;
					}

					.remivon {
						position: absolute;
						width: 30rpx;
						height: 30rpx;
						top: -6%;
						right: -6%;
						z-index: 9999;
					}
				}

				.uploadimg {
					width: 140rpx;
					height: 140rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.jiahaoicon {
						width: 42rpx;
						height: 42rpx;
						margin-top: 40rpx;
					}

					.sctext {
						width: 100%;
						text-align: center;
						margin-top: 18rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909C;
					}
				}
			}

			textarea {
				width: 480rpx;
				height: 200rpx;
				margin-top: 30rpx;
				margin-left: 30rpx;
			}
		}
	}

	page {
		background: #F7F8FA;
	}

	::v-deep .u-popup__content {
		background-color: rgba(255, 0, 0, 0) !important;
	}

	.kuaisuzixun {
		width: 100%;
		overflow: hidden;
		position: relative;

		.kuaisuzixunback {
			width: 100%;
			height: 486rpx;
			position: absolute;
			z-index: -1;
		}

		.contentList {
			width: 686rpx;
			margin: auto;
			overflow: hidden;
			margin-top: 34rpx;

			.itemline {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
				margin-bottom: 28rpx;
				position: relative;

				.biaoji {
					position: absolute;
					right: 0%;
					top: 0%;
					font-weight: 400;
					font-size: 24rpx;
					color: #4E5969;
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					margin-right: 30rpx;

					.redbd {
						width: 16rpx;
						height: 16rpx;
						background: #F53F3F;
						border-radius: 50%;
						margin-right: 8rpx;
					}
				}

				.centernr {
					width: 632rpx;
					margin: 26rpx auto;

					.textms {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						margin-top: 16rpx;
						display: -webkit-box;
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.usertext {
						display: flex;
						align-items: center;

						.avtar {
							width: 68rpx;
							height: 68rpx;
							border-radius: 50%;

						}

						.texts {
							margin-left: 8rpx;
							overflow: hidden;

							.t1 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #1D2129;
							}

							.datetext {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #4E5969;
							}
						}
					}
				}

			}
		}

		.fenlei {
			width: 686rpx;
			margin: auto;
			margin-top: 40rpx;
			display: flex;
			align-items: center;

			.itemfenleitext1 {
				width: 176rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-right: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #4E5969;
				text-align: center;
				line-height: 56rpx;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(130, 213, 251, 0.58);
			}

			.itemfenleitext {
				width: 176rpx;
				height: 56rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				position: relative;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				line-height: 56rpx;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(130, 213, 251, 0.58);
				font-size: 32rpx;
				color: #FFFFFF;
				margin-right: 48rpx;

				.itemfenleitextback {
					width: 100%;
					height: 68.34rpx;
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: -30%;
					margin: auto;
					z-index: -1;
				}
			}
		}

		.sousuo {
			width: 686rpx;
			height: 76rpx;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			background: #FFFFFF;
			margin: auto;
			margin-top: 24rpx;
			display: flex;
			align-items: center;

			.seachicon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 24rpx;
			}

			input {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				margin-left: 12rpx;
			}
		}
	}
</style>